import { useRef, useEffect } from "react";

// 1.获取dom元素
// 2.稳定引用的存储器（定时器管理）

function App() {
  // HTMLInputElement为内置类型
  // 可根据获取的dom元素类型，指定如HTMLDivElement、HTMLButtonElement等
  const domRef = useRef<HTMLInputElement>(null);

  const timerId = useRef<number | undefined>(undefined);

  useEffect(() => {
    // 组件挂载完成后，获取dom元素
    console.log(domRef.current);
    // 可选链 前面不为空值（null / undefined），才会执行点运算
    // 类型守卫 防止出现空值点运算错误
    domRef.current?.focus();

    // 定时器管理
    timerId.current = setInterval(() => {
      console.log('123')
    },1000)

    return () => {
      // 组件卸载前，清除定时器
      clearInterval(timerId.current);
    }
  }, []);

  return (
    <div>
      <input ref={domRef} />
    </div>
  );
}

export default App;
